<template>
  <div>
    <!-- 表格部分 -->
    <UiTable :tableData="tableList" v-bind="tableConfig" @handleSelectionChange="handleSelectionChange">
      <!-- ui-page-table 自定义插槽 -->
      <template v-for="item in tableItems" :key="item.prop" #[item.slotName]="scope">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </UiTable>
    <!-- 分页部分 -->
    <div class="pagination" v-if="isHasPagination">
      <UiPagination v-model:pageInfo="pageInfo" :total="tableTotal" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch } from "vue"
import { isNotEmptyObject } from "@/utils/tools"

const emits = defineEmits(["update:pageInfo", "callHandleSelectionChange"])

const props = defineProps({
  // store适配器 处理增删改查业务
  storeAdapter: {
    type: Object,
    required: true
  }, // 直接传 adapter
  // 表格配置
  tableConfig: {
    type: Object,
    require: true
  },
  // 分页配置
  pageInfo: {
    type: Object,
    default: () => ({})
  },
  // 自定义查询参数
  customQueryTableParams: {
    type: Object,
    default: () => ({})
  },
  // 是否带有分页
  isHasPagination: {
    type: Boolean,
    default: true
  },
})

// 表格数据
const tableList = computed(() => props.storeAdapter.tableList?.value ?? [])

// 表格数据总数
const tableTotal = computed(() => props.storeAdapter.tableTotal?.value ?? 0)

// 表格配置所有列
const tableItems = computed(() => props.tableConfig?.tableItems ?? [])

// 查询表格所有查询条件
const queryTableParams = ref({})

// 用 computed 做双向绑定：读 props，写时 emit 回父组件
const pageInfo = computed({
  get() {
    return props.pageInfo
  },
  set(val) {
    emits('update:pageInfo', val)
  }
})

onMounted(() => {
  fetchTableData()
})

// 获取页面表格数据
const fetchTableData = (params = {}) => {
  // 查询表单无参数
  if (params == null) {
    queryTableParams.value = {}
  }

  // 查询表单有参数
  if (isNotEmptyObject(params)) {
    queryTableParams.value = params
  }

  // 仅当分页存在且父组件传入 pageInfo 时才合并分页参数
  if (props.isHasPagination && isNotEmptyObject(props.pageInfo)) {
    queryTableParams.value = { ...queryTableParams.value, ...props.pageInfo }
  }

  // 融合页面配置自定义查询参数
  queryTableParams.value = { ...queryTableParams.value, ...props.customQueryTableParams }

  // 根据定位到对应的store调用方法
  props.storeAdapter.getPageTableData(queryTableParams.value);
}

// 显示分页器 并且 分页发生变化
if (props.isHasPagination) {
  watch(
    () => pageInfo,
    (newVal) => {
      fetchTableData();
    },
    { deep: true, immediate: false }
  )
}

// customQueryTableParams 变化
watch(
  () => props.customQueryTableParams,
  (newVal) => {
    // 当 customQueryTableParams 改变时，请求接口
    fetchTableData();
  },
  { deep: true, immediate: false } // immediate 可以根据需求设置，false 更安全
)

// 表格多选
const handleSelectionChange = (rows) => {
  emits("callHandleSelectionChange", rows)
}

// 接收查询参数
const receiveQueryParams = (value, formItem) => {
  queryTableParams.value = {
    ...queryTableParams.value,
    [formItem.field]: value
  }
}

defineExpose({ fetchTableData, receiveQueryParams })
</script>
<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>